<!-- eslint-disable no-undef -->
<script setup lang="ts">
// 导入类型、组件、接口、模块
import type { PostLoginType } from '@/api/login/types'
import type { FormRules, FormInstance } from 'element-plus'

import { User, Lock, Sunny, Moon } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

// 变量
const router = useRouter()

// 扫码登录
const state = ref(true)

// 表单数据
const formData = reactive<PostLoginType>({
	uname: '',
	pwd: ''
})
// 表单验证
const checkUname = (rule: any, value: string, callback: any) => {
	if (/^.{2,15}$/.test(value)) {
		callback()
	} else {
		callback(new Error('至少2~15个字符'))
	}
}
const formRules = reactive<FormRules>({
	uname: [
		{ required: true, message: '请输入用户名', trigger: 'blur' },
		// { min: 2, max: 15, message: "至少2~15个字符", trigger: "blur" },
		{ validator: checkUname, trigger: 'blur' }
	],
	pwd: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ min: 2, max: 15, message: '至少2~15个字符', trigger: 'blur' }
	]
})
// 表单提交
const formRef = ref<FormInstance>()
const handleSubmit = () => {
	if (!formRef.value) return
	// formRef.value!.validate((isSuccess) => {
	formRef.value.validate((isSuccess) => {
		if (isSuccess) {
			// 1 请求接口
			// 2 判断 失败-弹框提示，成功-提示、存储、跳转
			console.log('表单数据.：', formData)
			ElMessage.success('登录成功')
			router.push('/')
		}
	})
}

// 换肤  1-黑夜 switch开启状态 2-白天 switch关闭状态
const skin = ref(2)
</script>

<template>
	<div class="loginContainer">
		<div class="loginBox">
			<!-- 换肤 -->
			<el-switch
				class="skin"
				v-model="skin"
				:active-value="1"
				:inactive-value="2"
				inline-prompt
				style="--el-switch-on-color: #2c2c2c"
				:active-icon="Moon"
				:inactive-icon="Sunny"
			/>
			<!-- 换肤 -->

			<!-- 登录背景 -->
			<div class="loginBg">
				<img src="@/assets/login1Bg.png" />
			</div>
			<!-- 登录背景 -->

			<!-- 表单盒子 -->
			<div class="formBox">
				<!-- 其他 -->
				<div class="tips">扫码登录</div>
				<img
					src=""
					class="qrcodeBtn"
					@click="state = !state"
				/>
				<!-- 其他 -->

				<!-- 扫描登录 -->
				<div class="qrcodeBox" v-if="!state">
					<h2 class="title">扫码登录</h2>
					<img
						src=""
					/>
				</div>
				<!-- 扫码登录 -->

				<!-- 标题 -->
				<div class="title" v-show="state">
					<img src="@/assets/logo.png" />
					<h1>锋团运营平台</h1>
				</div>
				<!-- 标题 -->
				<!-- 账号登录 -->
				<el-form v-show="state" size="large" :model="formData" :rules="formRules" ref="formRef">
					<el-form-item prop="uname">
						<el-input placeholder="请输入用户名" v-model="formData.uname" :prefix-icon="User"></el-input>
					</el-form-item>
					<el-form-item prop="pwd">
						<el-input placeholder="请输入密码" v-model="formData.pwd" :prefix-icon="Lock" show-password></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleSubmit">登录</el-button>
					</el-form-item>
				</el-form>
				<!-- 账号登录 -->
			</div>
			<!-- 表单盒子 -->
		</div>
	</div>
</template>

<style lang="scss" scoped>
.loginContainer {
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #f0f2f5;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 25px;
	box-sizing: border-box;

	.loginBox {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: white;
		border-radius: 8px;
		position: relative;

		.skin {
			position: absolute;
			right: 20px;
			top: 20px;
		}

		.loginBg {
			width: 50%;
			height: 100%;
			img {
				width: 100%;
				max-width: 900px;
			}
		}

		.formBox {
			width: 50%;
			max-width: 500px;
			padding: 40px;
			border-radius: 10px;
			box-shadow: 0 2px 12px #0000001a;
			box-sizing: border-box;
			position: relative;
			// other
			.tips {
				width: 150px;
				height: 40px;
				border-radius: 8px;
				box-shadow: 0 2px 12px #0000001a;
				position: absolute;
				top: -60px;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #1492ff;
				font-size: 16px;
				&::after {
					content: '';
					box-sizing: border-box;
					width: 10px;
					height: 26px;
					border-top: 13px solid #fff;
					border-left: 5px solid transparent;
					border-right: 5px solid transparent;
					border-bottom: 13px solid transparent;
					position: absolute;
					top: 40px;
					right: 16px;
				}
			}
			.qrcodeBtn {
				position: absolute;
				right: 0;
				top: 0;
				cursor: pointer;
				width: 30px;
			}
			.qrcodeBox {
				text-align: center;
			}
			// title
			.title {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 15px;
				img {
					width: 63px;
					height: 54px;
				}
				h1 {
					font-size: 45px;
				}
			}
			.el-form {
				max-width: 350px;
				margin: auto;
				.el-button,
				.el-input {
					width: 100%;
				}
			}
		}
	}
}

@media (max-width: 1200px) {
	.loginContainer .loginBox .loginBg img {
		margin-top: 100px;
	}
}
@media (max-width: 920px) {
	.loginBg {
		display: none;
	}
	.loginContainer {
		padding: 10px;

		.formBox {
			width: 95% !important;
			padding: 30px;
			.title {
				display: flex;
				align-items: center;
				justify-content: center;

				margin-bottom: 15px;
				img {
					width: 53px;
					height: 44px;
				}
				h1 {
					font-size: 30px !important;
				}
			}
		}
	}
}
</style>
